<template>
  <div class="navMenu">
    <label v-for="navMenu in navMenus">
      <el-menu-item v-if="navMenu.child.length==0"
                    :data="navMenu" :index="navMenu.menuUrl" :route="navMenu.menuUrl">
        <i class="el-icon-location"></i>
        <span slot="title">{{navMenu.menuName}}</span>
      </el-menu-item>

      <el-submenu v-if="navMenu.child.length!=0"
                  :data="navMenu" :index="navMenu.menuUrl">
        <template slot="title">
          <i class="el-icon-more-outline"></i>
          <span> {{navMenu.menuName}}</span>
        </template>
        <NavMenu :navMenus="navMenu.child"></NavMenu>
      </el-submenu>
    </label>
  </div>
</template>

<style scoped>
  .el-menu-item.is-active {
    background-color: rgba(51, 51, 51, 0.5) !important;
  }
</style>
<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {
        menus:null
      }
    },
    created(){
      this.getMenus();
    },
    methods: {
      handleOpen(key, keyPath) {

      },
      handleClose(key, keyPath) {

      },
      handleSelect(key, keyPath){
        console.log(key+"-----------"+keyPath);
        switch(key){
          case '1-1-1':
            //this.$router.push('/Page1');
            //this.breadcrumbItems  = ['导航一']
            break;
        }
      },
      getMenus(){
//        this.store.saveByName("Tasks",[]);

      }
    }
  }
</script>
